<template>
	<view class="popularDetail" >
		<!--  -->
		<view :style="" class="index_nav">
			<view class="nav_head" :style="{'marginTop':StatusBar + 'px'}">
				<view class="header_back" @click="navigateBack()">
					<image src="../../static/popularGames/return.png"></image>
				</view>
				<view class="head_right">
					<view class="head_right_more">
						<image src="../../static/popularGames/detail/shoare.png"  @click="shoare = true"></image>
					</view>
				</view>
			</view>
			
			<view class="u-demo-block">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in banner_list" :key="index">
						<view class="swiper-item">
							<image :src="item" @click="ClickImage(banner_list, index)"></image>
						</view>
					</swiper-item>
				</swiper>
				
				<view class="light">{{ currentNum + 1 }} / {{ banner_list.length }}</view>
			</view>
		</view>
		
		<view :style="{'paddingTop': StatusBar + 'px','background': '#252A34'}" class="index_nav index_nav_fxed" v-if="headerIf">
			<view class="nav_head" :style="{'marginTop':StatusBar + 'px', 'background': '#252A34'}">
				<view class="header_back" @click="navigateBack()">
					<image src="../../static/popularGames/return.png"></image>
				</view>
				<view class="head_right">
					<view class="head_right_more">
						<image src="../../static/popularGames/detail/shoare.png"  @click="shoare = true"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="popularDetail_body">
			<view class="popularDetail_body_tag">
				<view class="popularDetail_body_tag_item">
					<view class="popularDetail_body_tag_item_image">
						<image src="../../static/popularGames/detail/dingji.png"></image>
					</view>
					<view class="popularDetail_body_tag_item_text">顶级账号</view>
				</view>
				
				<view class="popularDetail_body_tag_item">
					<view class="popularDetail_body_tag_item_image">
						<image src="../../static/popularGames/detail/cover.png"></image>
					</view>
					<view class="popularDetail_body_tag_item_text">可买包赔</view>
				</view>
				
				<view class="popularDetail_body_tag_item">
					<view class="popularDetail_body_tag_item_image">
						<image src="../../static/popularGames/detail/generation.png"></image>
					</view>
					<view class="popularDetail_body_tag_item_text">平台代售</view>
				</view>
			</view>
			
			<view class="popularDetail_body_price">
				<view class="popularDetail_body_price_span" v-if="details.price">￥</view>
				<text>{{details.price || '***'}}</text>
			</view>
			
			<view class="popularDetail_body_title">
				<view class="popularDetail_body_title_text" :style="{'height': title_height}">{{details.title || '加载中...'}}</view>
				<view class="popularDetail_body_title_show" @click="title_height = ''" v-if="title_height && details.title">
					查看更多
					<view class="popularDetail_body_title_show_icon">
						<image src="../../static/popularGames/detail/text_show.png"></image>
					</view>
				</view>
				
				<view class="popularDetail_body_title_show" @click="title_height = '95rpx'" v-if="!title_height && details.title">
					收起
					<view class="popularDetail_body_title_show_icon popularDetail_body_title_show_icons">
						<image src="../../static/popularGames/detail/text_show.png"></image>
					</view>
				</view>
			</view>
		
			<view class="popularDetail_body_notice">
				<u-notice-bar :text="notice_name" color='#FF7121' bgColor="#FFF6E8" speed="0" :icon="'../../static/popularGames/detail/notice.png'"></u-notice-bar>
			</view>
			
			<view class="popularDetail_body_zhangdetails">
				<view class="popularDetail_body_zhangdetail_tab">
					<view class="popularDetail_body_zhangdetail_tab_item" :class="zhangdetail_tabId == index ? 'active' : ''" @click="zhangdetail_tab(index)" v-for="(item, index) in zhangdetail_tabList" :key="index">
						{{ item }}
					</view>
				</view>
				
				<view class="popularDetail_body_zhangdetail_tabBody" v-if='zhangdetail_tabId  == 0'>
					<view class="popularDetail_body_zhangdetail_tabBody_image">
						<view class="popularDetail_body_zhangdetail_tabBody_bos_item_Ttext">账号详细信息</view>
						<view class="popularDetail_body_zhangdetail_tabBody_bos_item_Btext">上架时间：{{details.update_time}}</view>
					</view>
					<view class="popularDetail_body_zhangdetail_tabBody_bos">
						<view class="popularDetail_body_zhangdetail_tabBody_bos_item">
							<view class="popularDetail_body_zhangdetail_tabBody_bos_item_left">商品编号</view>
							<view class="popularDetail_body_zhangdetail_tabBody_bos_item_right">{{details.uid}}</view>
						</view>
						<view class="popularDetail_body_zhangdetail_tabBody_bos_item">
							<view class="popularDetail_body_zhangdetail_tabBody_bos_item_left">游戏名称</view>
							<view class="popularDetail_body_zhangdetail_tabBody_bos_item_right">{{details.game_name}}</view>
						</view>
						<view class="popularDetail_body_zhangdetail_tabBody_bos_item">
							<view class="popularDetail_body_zhangdetail_tabBody_bos_item_left">游戏端</view>
							<view class="popularDetail_body_zhangdetail_tabBody_bos_item_right">{{details.serve_name}}</view>
						</view>
					</view>
				</view>
				
				<view class="popularDetail_body_zhangdetail_tabBody" v-if='zhangdetail_tabId  == 1'>
					<view class="popularDetail_body_zhangdetail_tabBody_flow">
						<view class="popularDetail_body_zhangdetail_tabBody_flow_item">
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_span"></view>
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_right">
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_top">第一步: 联系客服</view>
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_bottom">联系客服咨询下单</view>
							</view>
						</view>
						
						<view class="popularDetail_body_zhangdetail_tabBody_flow_item">
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_span"></view>
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_right">
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_top">第二步:验证角色</view>
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_bottom">上号进行验证角色是否相符</view>
							</view>
						</view>
						
						<view class="popularDetail_body_zhangdetail_tabBody_flow_item">
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_span"></view>
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_right">
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_top">第三步:修改资料</view>
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_bottom">修改账号资料</view>
							</view>
						</view>
						
						<view class="popularDetail_body_zhangdetail_tabBody_flow_item">
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_span"></view>
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_right">
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_top">第四步:结款交易</view>
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_bottom">给号主放款交易完成</view>
							</view>
						</view>
						
						<view class="popularDetail_body_zhangdetail_tabBody_flow_item">
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_span"></view>
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_right">
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_top">第五步:确认资料</view>
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_bottom">确认资料交接完成</view>
							</view>
						</view>
						
						<view class="popularDetail_body_zhangdetail_tabBody_flow_item">
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_span"></view>
							<view class="popularDetail_body_zhangdetail_tabBody_flow_item_right">
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_top">第六步:记录备案</view>
								<view class="popularDetail_body_zhangdetail_tabBody_flow_item_bottom">资料审核结束记录备案</view>
							</view>
						</view>
					</view>
				</view>
			
				<view class="popularDetail_body_zhangdetail_tabBody" v-if='zhangdetail_tabId  == 2'>
					<view class="popularDetail_body_zhangdetail_tabBody_jiayi">
						<view class="popularDetail_body_zhangdetail_tabBody_jiayi_item" v-for="item in gorup_data" :key="item.id">
							<view class="popularDetail_body_zhangdetail_tabBody_jiayi_item_left">{{item.name}}:{{item.text}}</view>
							<view class="popularDetail_body_zhangdetail_tabBody_jiayi_item_right">
								<view class="popularDetail_body_zhangdetail_tabBody_jiayi_item_right_image" @click="copy(item.text)">
									<image src="../../static/popularGames/detail/copy.png"> </image>
								</view>
								<view class="popularDetail_body_zhangdetail_tabBody_jiayi_item_right_jing" @click="jing('222')">进群</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="popularDetail_body_introduce">
				<view class="popularDetail_body_introduce_title">
					{{details.game_name}}包赔类型介绍
				</view>
				<view class="popularDetail_body_introduce_li" v-for="item in insure_data" :key="item.id">
					<view class="popularDetail_body_introduce_li_top">{{item.name}}</view>
					<view class="popularDetail_body_introduce_li_bottom">额外支付号价<view>{{item.proportion * 100}}%</view>，账号发生找回7天内未追回，平台赔付<view>{{item.proportion * 1000}}%</view></view>
				</view>
			</view>
		
			<view class="popularDetail_body_evaluate" v-if="false">
				<view class="popularDetail_body_evaluate_top">
					<view class="popularDetail_body_evaluate_left">账号评价(2)</view>
					<view class="popularDetail_body_evaluate_right" @click="navigateTo()">查看全部<image src="../../static/popularGames/detail/right.png"> </image></view>
				</view>
				<view class="popularDetail_body_evaluate_list">
					<view class="popularDetail_body_evaluate_list_item">
						<view class="popularDetail_body_evaluate_list_item_left">
							<view class="popularDetail_body_evaluate_list_item_left_image">
								<u-avatar src="../../static/my/shzx.png" size="60rpx"></u-avatar>
							</view>
							<view class="popularDetail_body_evaluate_list_item_left_body">
								<view class="popularDetail_body_evaluate_list_item_left_body_name">问道子</view>
								<view class="popularDetail_body_evaluate_list_item_left_body_content">可小刀吗</view>
							</view>
						</view>
					</view>
					<view class="popularDetail_body_evaluate_list_item">
						<view class="popularDetail_body_evaluate_list_item_left">
							<view class="popularDetail_body_evaluate_list_item_left_image">
								<u-avatar src="../../static/my/shzx.png" size="60rpx"></u-avatar>
							</view>
							<view class="popularDetail_body_evaluate_list_item_left_body">
								<view class="popularDetail_body_evaluate_list_item_left_body_name">问道子</view>
								<view class="popularDetail_body_evaluate_list_item_left_body_content">可小刀吗</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="popularDetail_body_evaluate_say">
					<view class="popularDetail_body_evaluate_say_left">
						<u-avatar src="../../static/my/shzx.png" size="60rpx"></u-avatar>
					</view>
					<view class="popularDetail_body_evaluate_say_input">
						<image src="../../static/popularGames/detail/line.png"> </image>
						<input type="text" v-model="content" placeholder="请输入内容~" @confirm="search" />
					</view>
					<view class="popularDetail_body_evaluate_say_right" @click="release">发布</view>
				</view>
			</view>
		
			<view class="popularDetail_body_Details">
				<view class="popularDetail_body_Details_title">商品详情</view>
				<view class="popularDetail_body_Details_body">
					<image :src="item" v-for="(item, index) in banner_list" :key="item" @click="ClickImage(banner_list, index)"></image>
				</view>
			</view>
		</view>
	
		<view class="popularDetail_bottom">
			<view class="popularDetail_bottom_collection" @click="collection(details.collection)">
				<text class="iconfont icon-sc" :class="details.collection ? 'icon-sc1' : 'icon-sc'"></text>
				<view class="popularDetail_bottom_collection_name">{{details.collection ? '取消' : '收藏'}}</view>
			</view>
			
		<!-- 	<view class="popularDetail_bottom_collection" @click="Bargaining = true" >
				<image src="../../static/popularGames/detail/Bargaining.png"> </image>
				<view class="popularDetail_bottom_collection_name">砍价</view>
			</view> -->
			
			<view class="popularDetail_bottom_serve"  @click="navigateTo('serve')" >联系客服</view>
			<view class="popularDetail_bottom_buy"  @click="navigateTo('confirm_order', `?id=${details.id}`)">立即购买</view>
		</view>
		
		<u-popup :show="shoare" mode="center" bgColor="transparent" @close="shoare_close" @open="shoare_open" v-if="false">
			<view class="shoare_popup" id="htmlCanvas" ref="imgCanvas">
				<image src="../../static/popularGames/detail/shoare_01.png"> </image>
				<view class="shoare_popup_Ztitle">
					<view class="shoare_popup_Ztitle_left">豆紫酱</view>
					<view class="shoare_popup_Ztitle_right">分享了一个宝贝给你</view>
				</view>
				
				<view class="shoare_popup_Etitle">
					<view class="shoare_popup_Etitle_text">HO49 冒险等级60 -送网易未实名邮箱-60级，61黄，女主，满命钟离，3HO49 冒险等级60 -送网易未实名邮箱-60级，61黄，女主，满命钟离，3</view>
					<view class="shoare_popup_Etitle_price"><view>￥</view>123</view>
				</view>
				
				<view class="shoare_popup_list">
					<view>
						<view class="shoare_popup_list_item">
							<view>商品编号:</view>
							<view>157238</view>
						</view>
						
						<view class="shoare_popup_list_item">
							<view>商品编号:</view>
							<view>1572389</view>
						</view>
						
						<view class="shoare_popup_list_item">
							<view>商品编号:</view>
							<view>1572389</view>
						</view>
						<view class="shoare_popup_list_item">
							<view>商品编号:</view>
							<view>1572389</view>
						</view>
						<view class="shoare_popup_list_item">
							<view>商品编号:</view>
							<view>1572389</view>
						</view>
						<view class="shoare_popup_list_item">
							<view>商品编号:</view>
							<view>1572389</view>
						</view>
						<view class="shoare_popup_list_item">
							<view>星级角色:</view>
							<view>
								甘雨,阿贝多,刻晴,莫娜,七七,迪卢克,琴,可莉,温迪,钟离,胡桃,雷电将军,珊瑚宫心海,优拉,枫原万叶,神里绫华,申鹤,八重神子,夜兰,赛诺,纳西姐,迪希雅,那维莱特</view>
						</view>
						<view class="shoare_popup_list_item">
							<view>星级角色:</view>
							<view>
								甘雨,阿贝多,刻晴,莫娜,七七,迪卢克,琴,可莉,温迪,钟离,胡桃,雷电将军,珊瑚宫心海,优拉,枫原万叶,神里绫华,申鹤,八重神子,夜兰,赛诺,纳西姐,迪希雅,那维莱特</view>
						</view>
					</view>
				</view>
				
				<view class="shoare_popup_xiaoti">画报内容展示有限，请前往淘气游查看</view>
				<view class="shoare_popup_add">
					<view class="shoare_popup_add_bottom" @click="add_code">
						保存海报 
					</view>
					<view class="shoare_popup_add_code">
						
					</view>
				</view>
				<view class="shoare_popup_close" @click="shoare_close">
					<image src="../../static/popularGames/detail/close.png"> </image>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="Bargaining" mode="center" bgColor="transparent" @close="shoare_close" @open="Bargaining_open">
			<view class="Bargaining_popup">
				<image src="../../static/popularGames/detail/Bargaining_01.png"></image>
				<view class="Bargaining_popup_body">
					<view class="Bargaining_popup_body_title">
						砍价
					</view>
					<view class="Bargaining_popup_body_hexin">
						<view class="Bargaining_popup_body_hexin_text">请输入您的出价</view>
						<input type="text" @change="Bargaining_change($event,1)"v-model="Bargaining_value" placeholder="请输入内容~" @confirm="Bargaining_search" />
					</view>
				</view>
				<view class="Bargaining_popup_bodys">
					<view class="Bargaining_popup_body_title">
						该商品原价<view><view>￥</view>5678</view>
					</view>
				</view>
				<view class="Bargaining_popup_Submit"><view>立即提交</view> <image src="../../static/popularGames/detail/Bargaining_02.png"> </image> <image src="../../static/popularGames/detail/Bargaining_03.png"> </image></view>
				<view class="shoare_popup_close" @click="shoare_close">
					<image src="../../static/popularGames/detail/close.png"> </image>
				</view>
			</view>
		</u-popup>
		<u-loading-page style="z-index:9999" bg-color="#FCFCFF" image="../../static/logo.gif"  icon-size="140"  loading-text="正在加载请您耐心等待..."  fontSize="26rpx"  :loading="loading"></u-loading-page>
	</view>
</template>
<script>
	import { details_message, insure_list } from '@/api/details'
	import { game_group } from '@/api/game'
	import { set_collection } from '@/api/user'
	
	export default {
		data() {
			return {
				loading: false,
				headerIf: false,
				StatusBar: this.StatusBar,
				details: {},
				insure_data: [],
				gorup_data: [],
				currentNum: 0,
				title_height: '95rpx',
				shoare: false,
				Bargaining: false,
				notice_name: '淘气游严厉禁止未成年用户进行账号交易!',
				banner_list: [],
				zhangdetail_tabId: 0,
				zhangdetail_tabList: [
					'账号详情',
					'购买流程',
					'交易群',
				],
				content: '',
				Bargaining_value: '',
			}
		},
		onLoad(option) {
			if ('id' in option) {
				this.details_message(option.id)
				
			}else {
				this.flag = false
			}
		},
		onPageScroll(e) {
			this.headerIf = e.scrollTop > 15
		},
		methods: {
			ClickImage(banner_list, index) {
				uni.previewImage({
					urls: banner_list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: index, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			async details_message(id){
				this.loading = true
				let data = await details_message({id})
				this.loading = false
				if (data) {
					this.banner_list = data.data.img_list.split(',')
					this.details = data.data
					this.insure_list(id)
					this.game_group(data.data.game_id)
					this.flag = true
				}else {
					this.flag = false
				}
			},
			
			async game_group(game_id){
				let data = await game_group({game_id})
				if (data) {
					this.gorup_data = data.data
				}
			},
			async insure_list(id){
				let data = await insure_list({id})
				if (data) {
					this.insure_data = data.data
				}
			},
			
			Bargaining_change(e, i) {
				console.log(e, i)
			},
			Bargaining_search(e) {
				console.log(e)
			},
			Bargaining_open() {
				console.log('打开')
			},
			add_code() {
				html2canvas(this.$refs.imgCanvas,{
					backgroundColor: null,
					useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
				}).then((canvas)=>{
					let url = canvas.toDataURL('image/png')
					var imgUrl = url
					// 调用原生方法进行图片保存
					this.$bridge.callhandler("保存图片方法名", {
						imageurl: imgUrl
					});					
				})
			},
			shoare_close() {
				this.shoare = false
				this.Bargaining = false
				console.log('关闭')
			},
			shoare_open() {
				console.log('打开')
			},
			navigator() {
				plus.navigator.setStatusBarStyle("light"); //改变顶部的颜色
			},
			change(e) {
				this.currentNum = e.detail.current;
			},
			zhangdetail_tab(e) {
				this.zhangdetail_tabId = e
			},
			copy(e) {
				uni.setClipboardData({
				    data: e, // e是你要保存的内容
				    success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
				    }
				})
			},
			jing(e) {
				console.log(e)
			},
			async collection(status) {
				let data = await set_collection({id: this.details.id, status: !status})
				this.details.collection = !status
				this.details = JSON.parse(JSON.stringify(this.details))
				uni.showToast({
					title: status ? '取消收藏成功' : '收藏成功',
					icon:'none'
				})
			},
			search(e) {
				console.log(e)
			},
			release() {
				console.log(this.content)
			}
		}
	}
</script>

<style lang="less" scoped>
	
	.popularDetail {
		width: 100%;
		overflow: hidden;
		
		&::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */
		}
		// 头部
		.index_nav {
			position: relative;
			margin-bottom: 0;
			padding-bottom: 0;
			.nav_head {
				position: absolute;
				width: 100%;
				max-width: 430px;
				top: 0;
				height: 76rpx;
				left: 50%;
				transform: translate(-50%, 0);
				box-sizing: border-box;
				padding: 0 32rpx;
				display: flex;
				margin-bottom: 0;
				padding-bottom: 0;
				align-items: center;
				z-index: 2;
				.header_back {
					position: relative;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.head_text {
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.6);
					font-weight: bold;
				}
				.head_right {
					margin-left: auto;
					display: flex;
					image {
						width: 100%;
						height: 100%;
					}
					.head_right_search {
						width: 68rpx;
						height: 68rpx;
						position: relative;
					}
					.head_right_more {
						width: 68rpx;
						height: 68rpx;
						position: relative;
						margin-left: 20rpx;
					}
				}
			}
			.u-demo-block {
				z-index: 0;
				position: relative;
				.light {
					padding: 0 20rpx;
					height: 44rpx;
					background: rgba(255,255,255,0.66);
					position: absolute;
					bottom: 66rpx;
					left: 24rpx;
					border-radius: 88rpx 88rpx 88rpx 88rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #22150B;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.swiper-box {
					width: 100%;
					height: 598rpx;
					.swiper-item {
						width: 100%;
						height: 598rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			
		}
		.index_nav_fxed {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9999;
			background: #252A34;
		}
		.popularDetail_body {
			width: 100%;
			background: #F7F8FA;
			border-radius: 44rpx 44rpx 0rpx 0rpx;
			margin-top: -40rpx;
			position: relative;
			z-index: 5;
			padding: 32rpx;
			padding-bottom: 196rpx;
			.popularDetail_body_tag {
				display: flex;
				width: 100%;
				align-items: center;
				.popularDetail_body_tag_item {
					position: relative;
					width: 170rpx;
					height: 52rpx;
					.popularDetail_body_tag_item_image {
						width: 170rpx;
						height: 52rpx;
						position: absolute;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.popularDetail_body_tag_item_text{
						font-weight: 500;
						font-size: 24rpx;
						color: #FFF4F4;
						position: relative;
						z-index: 2;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-left: 58rpx;
					}
				}
			}
			.popularDetail_body_price {
				font-weight: 800;
				font-size: 44rpx;
				color: #FF2020;
				line-height: 52rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				display: flex;
				align-items: flex-end;
				margin-top: 20rpx;
				.popularDetail_body_price_span {
					font-size: 28rpx;
					line-height: 38rpx;
					margin-right: 4rpx;
				}
			}
			.popularDetail_body_title {
				width: 692rpx;
				.popularDetail_body_title_text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #22150B;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-top: 8rpx;
					overflow: hidden;
				}
				.popularDetail_body_title_show {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #B0B0B0;
					line-height: 23rpx;
					text-align: left;
					font-style: normal;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;
					.popularDetail_body_title_show_icon {
						width: 32rpx;
						height: 32rpx;
						image {
							width: 100%;
							height: 100%;
							margin-left: 4rpx;
						}
					}
					
					.popularDetail_body_title_show_icons {
						 transform: rotate(180deg);
					}
				}
			}
			.popularDetail_body_notice {
				width: 685rpx;
				height: 64rpx;
				margin-top: 20rpx;
				margin-bottom: 16rpx;
			}
			.popularDetail_body_zhangdetails {
				width: 638rpx;
				padding: 24rpx 24rpx;
				padding-top: 28rpx;
				background: #FFFFFF;
				margin-top: 46rpx;
				height: 100%;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				.popularDetail_body_zhangdetail_tab {
					display: flex;
					align-items: center;
					height: auto;
					justify-content: center;
					.popularDetail_body_zhangdetail_tab_item {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #858585;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-right: 80rpx;
						&:last-child {
							margin-right: 0;
						}
					}
					.active {
						color: #22150B;
						font-size: 32rpx;
						font-weight: 800;
					}
				}
				.popularDetail_body_zhangdetail_tabBody {
					width: 638rpx;
					margin: 0 auto;
					// height: auto;
					margin-top: 20rpx;
					position: relative;
					.popularDetail_body_zhangdetail_tabBody_image {
						width: 638rpx;
						position: relative;
						height: 108rpx;
						margin: 0;
						padding-left: 48rpx;
						padding-top: 26rpx;
						background: url('@/static/popularGames/detail/tabBody_01.png') no-repeat;
						background-size: 638rpx 132rpx;
						.popularDetail_body_zhangdetail_tabBody_images {
							width: 638rpx;
							height: 132rpx;
							// position: absolute;
							
							background: url('@/static/popularGames/detail/tabBody_01.png') no-repeat;
							background-size: 638rpx 132rpx;
							left: 0;
							top: 0;
							z-index: 1;
							image {
								width: 100%;
								height: 100%;
							}
						}
						
						.popularDetail_body_zhangdetail_tabBody_bos_item_Ttext{
							font-weight: 500;
							font-size: 32rpx;
							color: #22150B;
							line-height: 38rpx;
							text-align: left;
							font-style: normal;
							position: relative;
							z-index: 2;
						}
						
						.popularDetail_body_zhangdetail_tabBody_bos_item_Btext {
							font-weight: 500;
							font-size: 20rpx;
							color: #6E471A;
							line-height: 23rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							position: relative;
							z-index: 2;
							margin-top: 18rpx;
						}
					}
					.popularDetail_body_zhangdetail_tabBody_bos {
						width: 638rpx;
						// height: 132rpx;
						margin-top: 0;
						.popularDetail_body_zhangdetail_tabBody_bos_item {
							display: flex;
							&:last-child {
								.popularDetail_body_zhangdetail_tabBody_bos_item_left {
									border: none;
								}
							}
							.popularDetail_body_zhangdetail_tabBody_bos_item_left {
								width: 216rpx;
								height: 72rpx;
								background: #FFF3E5;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 20rpx;
								color: #858585;
								line-height: 72rpx;
								text-align: center;
								font-style: normal;
								text-transform: none;
								border-bottom: 2rpx solid #FFFFFF;
								
							}
							.popularDetail_body_zhangdetail_tabBody_bos_item_right {
								width: 422rpx;
								height: 72rpx;
								background: #FFFAF4;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 20rpx;
								color: #22150B;
								line-height: 72rpx;
								text-align: center;
								font-style: normal;
								text-transform: none;
								border-bottom: 2rpx solid #FFFFFF;
								border-left: 2rpx solid #FFFFFF;
							}
						}
					}
					.popularDetail_body_zhangdetail_tabBody_flow {
						display: flex;
						flex-direction: column;
						margin-top: 8rpx;
						.popularDetail_body_zhangdetail_tabBody_flow_item {
							display: flex;
							align-items: center;
							margin-bottom: 36rpx;
							&:last-child {
								margin-bottom: 0;
								.popularDetail_body_zhangdetail_tabBody_flow_item_span  {
									&::after {
										display: none;
									}
								}
							}
							.popularDetail_body_zhangdetail_tabBody_flow_item_span {
								width: 64rpx;
								height: 64rpx;
								background: rgba(253,214,55,0.22);
								border-radius: 32rpx;
								position: relative;
								margin-right: 16rpx;
								
								&::before {
									content: '';
									display: block;
									position: absolute;
									width: 32rpx;
									height: 32rpx;
									background: #FDD637;
									border-radius: 32rpx;
									top: 0;
									left: 0;
									right: 0;
									bottom: 0;
									margin: auto;
								}
								
								&::after {
									content: '';
									display: block;
									position: absolute;
									width: 0rpx;
									height: 35.5rpx;
									border-radius: 2rpx;
									border: 4rpx solid #FDD637;
									left: 0;
									right: 0;
									bottom: 0;
									margin: auto;
									bottom: -37.5rpx;
								}
							}
							&:last-child {
								margin-bottom: 0;
								.popularDetail_body_zhangdetail_tabBody_flow_item_span  {
									&::after {
										display: none;
									}
								}
							}
							.popularDetail_body_zhangdetail_tabBody_flow_item_right {
								.popularDetail_body_zhangdetail_tabBody_flow_item_top {
									font-weight: 500;
									font-size: 24rpx;
									color: #858585;
									line-height: 28rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
								}
								.popularDetail_body_zhangdetail_tabBody_flow_item_bottom {
									font-weight: 800;
									font-size: 24rpx;
									color: #E8BB18;
									line-height: 28rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									margin-top: 8rpx;
								}
							}
						}
					}
					.popularDetail_body_zhangdetail_tabBody_jiayi {
						.popularDetail_body_zhangdetail_tabBody_jiayi_item {
							width: 638rpx;
							height: 104rpx;
							background: #FEF7DA;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;
							
							.popularDetail_body_zhangdetail_tabBody_jiayi_item_left {
								font-weight: 500;
								font-size: 24rpx;
								color: #22150B;
								line-height: 28rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-left: 16rpx;
							}
							
							.popularDetail_body_zhangdetail_tabBody_jiayi_item_right {
								margin-left: auto;
								display: flex;
								margin-right: 16rpx;
								align-items: center;
								.popularDetail_body_zhangdetail_tabBody_jiayi_item_right_image {
									width: 52rpx;
									height: 52rpx;
									image {
										width: 100%;
										height: 100%;
									}
								}
								
								.popularDetail_body_zhangdetail_tabBody_jiayi_item_right_jing {
									width: 130rpx;
									height: 60rpx;
									background: linear-gradient( 268deg, #FFB951 0%, #FDFF8C 100%);
									border-radius: 88rpx 88rpx 88rpx 88rpx;
									border: 4rpx solid #FDD637;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									margin-left: 16rpx;
									color: #22150B;
									line-height: 60rpx;
									text-align: center;
									font-style: normal;
									text-transform: none;
								}
							}
						}
					}
				}
				
			}
			.popularDetail_body_introduce {
				width: 686rpx;
				// height: 312rpx;
				background: url('@/static/popularGames/detail/introduce.png') center center;
				background-size:100%;
				padding: 16rpx 0;
				.popularDetail_body_introduce_title {
					font-weight: 800;
					font-size: 24rpx;
					color: #8A4807;
					line-height: 28rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					padding-top: 32rpx;
				}
				.popularDetail_body_introduce_li {
					margin-left: 24rpx;
					.popularDetail_body_introduce_li_top {
						font-weight: 800;
						font-size: 24rpx;
						color: #8A4807;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 24rpx;
					}
					
					.popularDetail_body_introduce_li_bottom {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #6F6F6F;
						line-height: 23rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						> view {
							color: #FF0000;
						}
					}
					&:last-child {
						.popularDetail_body_introduce_li_top {
							margin-top: 32rpx;
						}
					}
				}
			}
			.popularDetail_body_evaluate {
				background-color: #FFF;
				width: 686rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 16rpx;
				padding-bottom: 28rpx;
				.popularDetail_body_evaluate_top {
					display: flex;
					margin-left: 24rpx;
					padding-top: 24rpx;
					.popularDetail_body_evaluate_left {
						font-weight: 800;
						font-size: 32rpx;
						color: #22150B;
						line-height: 38rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.popularDetail_body_evaluate_right {
						font-weight: 500;
						font-size: 24rpx;
						color: #B0B0B0;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-left: auto;
						display: flex;
						align-items: center;
						margin-right: 24rpx;
						image {
							width: 32rpx;
							height: 32rpx;
							margin-left: 8rpx;
						}
					}
				}
				.popularDetail_body_evaluate_list {
					padding: 0 24rpx;
					.popularDetail_body_evaluate_list_item {
						margin-top: 28rpx;
						.popularDetail_body_evaluate_list_item_left {
							display: flex;
							.popularDetail_body_evaluate_list_item_left_image {
								width: 60rpx;
								height: 60rpx;
								margin-right: 24rpx;
							}
							.popularDetail_body_evaluate_list_item_left_body {
								.popularDetail_body_evaluate_list_item_left_body_name {
									font-weight: 800;
									font-size: 28rpx;
									color: #22150B;
									line-height: 33rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									margin-top: 10rpx;
								}
								.popularDetail_body_evaluate_list_item_left_body_content {
									font-weight: 500;
									font-size: 24rpx;
									color: #22150B;
									line-height: 28rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									margin-top: 12rpx;
								}
							}
						}
					}
				}
				.popularDetail_body_evaluate_say {
					display: flex;
					align-items: center;
					padding: 0 24rpx;
					margin-top: 36rpx;
					
					.popularDetail_body_evaluate_say_left {
						width: 60rpx;
						height: 60rpx;
						margin-right: 24rpx;
					}
					
					.popularDetail_body_evaluate_say_input {
						width: 418rpx;
						height: 68rpx;
						background: #F7F7F7;
						border-radius: 112rpx 112rpx 112rpx 112rpx;
						display: flex;
						align-items: center;
						image {
							width: 36rpx;
							height: 36rpx;
							margin-left: 24rpx;
						}
						
						input {
							font-size: 24rpx;
							color: #B0B0B0;
							margin-left: 16rpx;
						}
					}
					
					.popularDetail_body_evaluate_say_right {
						width: 124rpx;
						height: 64rpx;
						background: #FDD637;
						border-radius: 132rpx 132rpx 132rpx 132rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #22150B;
						line-height: 64rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
						margin-left: auto;
						// margin-right: 24rpx;
					}
				}
			}
			.popularDetail_body_Details {
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding-top: 24rpx;
				margin-top: 16rpx;
				.popularDetail_body_Details_title {
					font-size: 32rpx;
					font-weight: 800;
					color: #22150B;
					text-align: center;
					line-height: 38rpx;
					
				}
				.popularDetail_body_Details_body {
					margin-top: 6rpx;
					padding: 14rpx;
					padding-bottom: 0;
					width: 658rpx;
					margin: 0 auto;
					image {
						width: 100%;
						margin-bottom: 10rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
		.popularDetail_bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 88;
			height: 108rpx;
			background: #FFFFFF;
			box-shadow: -8rpx 0 8rpx 0rpx rgba(236,225,214,0.34);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-bottom: 48rpx;
			display: flex;
			align-items: center;
			.popularDetail_bottom_collection {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 20rpx;
				margin-left: 24rpx;
				&:nth-child(1) {
					margin-left: 32rpx;
				}
				image {
					width: 48rpx;
					height: 48rpx;
				}
				
				.icon-sc {
					font-size: 38rpx;
					color: #FDD637;
				}
				.icon-sc1 {
					font-size: 38rpx;
					color: #FDD637;
				}
				.popularDetail_bottom_collection_name {
					font-weight: 500;
					font-size: 24rpx;
					color: #22150B;
					line-height: 28rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					margin-top: 16rpx;
				}
			}
			
			.popularDetail_bottom_serve {
				width: 176rpx;
				height: 88rpx;
				margin-top: 20rpx;
				border-radius: 112rpx 112rpx 112rpx 112rpx;
				border: 4rpx solid #FDD637;
				font-weight: 800;
				font-size: 28rpx;
				color: #FFCD00;
				line-height: 88rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-left: 22rpx;
			}
			
			.popularDetail_bottom_buy {
				width: 352rpx;
				height: 88rpx;
				background: #FDD637;
				border-radius: 112rpx 112rpx 112rpx 112rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 28rpx;
				color: #22150B;
				line-height: 88rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-left: auto;
				margin-top: 20rpx;
				margin-right: 32rpx;
			}
		}
		.shoare_popup {
			width: 640rpx;
			height: 1012rpx;
			position: relative;
			margin: 0 auto;
			> image {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}
			.shoare_popup_Ztitle {
				margin-top: 132rpx;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 2;
				margin-left: 40rpx;
				.shoare_popup_Ztitle_left {
					font-weight: bold;
					font-size: 44rpx;
					color: #242846;
					line-height: 52rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				
				.shoare_popup_Ztitle_right {
					font-weight: 500;
					font-size: 24rpx;
					color: #242846;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 14rpx;
				}
			}
			.shoare_popup_Etitle {
				width: 548rpx;
				background: rgba(255,255,255,0.88);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 22rpx;
				position: relative;
				z-index: 2;
				margin-left: 40rpx;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				.shoare_popup_Etitle_text {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					overflow: hidden;
					font-weight: 500;
					font-size: 24rpx;
					color: #22150B;
					line-height: 28rpx;
					text-align: left;
					margin-left: 32rpx;
					
				}
				.shoare_popup_Etitle_price {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 44rpx;
					color: #22150B;
					line-height: 52rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 32rpx;
					margin-top: 8rpx;
					display: flex;
					align-items: flex-end;
					> view {
						font-size: 28rpx;
						line-height: 38rpx;
					}
				}
			}
			.shoare_popup_list {
				position: relative;
				z-index: 2;
				height: 388rpx;
				padding-left: 40rpx;
				margin-top: 22rpx;
				> view {
					position: relative;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					padding: 16rpx 28rpx;
					&::after {
						content: '';
						display: block;
						width: 528rpx;
						height: 368rpx;
						background: #FFFFFF;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						border: 6rpx solid #FED947;
						position: absolute;
						left: 0;
						top: 0;
					}
					&::before {
						content: '';
						display: block;
						width: 528rpx;
						height: 372rpx;
						background: #FFFFFF;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						border: 6rpx solid #FED947;
						position: absolute;
						left: 20rpx;
						top: 16rpx;
					}
					.shoare_popup_list_item {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						position: relative;
						z-index: 2;
						min-width: 50%;
						max-width: 476rpx;
						margin-bottom: 6rpx;
						> view {
							font-weight: 500;
							font-size: 20rpx;
							color: #6C6C6C;
							line-height: 31rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 4;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}
				}
				
			}
			.shoare_popup_xiaoti {
				width: 340rpx;
				height: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #B0B0B0;
				line-height: 23rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin: 0 auto;
				margin-top: 30rpx;
				position: relative;
				z-index: 2;
			}
			.shoare_popup_add {
				margin-top: 62rpx;
				position: relative;
				z-index: 2;
				display: flex;
				align-items: center;
				padding-left: 38rpx;
				.shoare_popup_add_bottom {
					width: 200rpx;
					height: 88rpx;
					background: #FD9001;
					box-shadow: inset 10rpx 10 44rpx 0rpx #FFE885;
					border-radius: 53rpx 53rpx 53rpx 53rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFF7E1;
					line-height: 88rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					background: url('@/static/popularGames/detail/add.png') no-repeat;
					background-size: 200rpx 88rpx;
				}
				.shoare_popup_add_code {
					width: 100rpx;
					height: 100rpx;
					margin-left: 38rpx;
					background-color: #000;
				}
			}
			.shoare_popup_close {
				width: 68rpx;
				height: 68rpx;
				position: absolute;
				bottom: -98rpx;
				left: 0;
				right: 0;
				z-index: 99;
				margin: auto;
				> image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.Bargaining_popup {
			width: 640rpx;
			height: 754rpx;
			position: relative;
			margin: 0 auto;
			> image {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}
			
			.Bargaining_popup_body {
				margin-top: 144rpx;
				position: relative;
				z-index: 2;
				.Bargaining_popup_body_title {
					height: 52rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #22150B;
					line-height: 52rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 272rpx;
				}
				.Bargaining_popup_body_hexin {
					margin-top: 48rpx;
					margin-left: 52rpx;
					.Bargaining_popup_body_hexin_text {
						height: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #22150B;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					> input {
						width: 488rpx;
						height: 72rpx;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #B0B0B0;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						padding-left: 24rpx;
						margin-top: 24rpx;
					}
				}
			}
			
			.Bargaining_popup_bodys {
				margin-top: 34rpx;
				position: relative;
				z-index: 2;
				.Bargaining_popup_body_title {
					height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #22150B;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 52rpx;
					display: flex;
					align-items: center;
					>view {
						font-weight: bold;
						font-size: 36rpx;
						color: #FE3F47;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						display: flex;
						align-items: flex-end;
						margin-left: 12rpx;
						> view {
							font-size: 24rpx;
							line-height: 20rpx;
							font-weight: 400;
						}
					}
				}
			}
			
			.Bargaining_popup_Submit {
				width: 372rpx;
				height: 88rpx;
				background: #282422;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				margin-left: 134rpx;
				margin-top: 152rpx;
				
				position: relative;
				display: flex;
				align-items: center;
				z-index: 2;
				> view {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFCF4;
					font-style: normal;
					text-transform: none;
					margin-left: 96rpx;
				}
				>image:nth-child(2) {
					width: 48rpx;
					height: 48rpx;
					margin-left: 4rpx;
				}
				>image:nth-child(3) {
					width: 70rpx;
					height: 70rpx;
					margin-left: 10rpx;
				}
			}
			
			.shoare_popup_close {
				width: 68rpx;
				height: 68rpx;
				position: absolute;
				bottom: -98rpx;
				left: 0;
				right: 0;
				z-index: 99;
				margin: auto;
				> image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>